<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="9-4.js"></script>
           
    <script type="text/javascript" src="9-6.js"></script>          
            <style type="text/css">
        #loginArea {
            width: 260px;
            font-size: 12px;
        }

        #loginArea p {
            margin: 0px 0 3px;
            width: 100%;
        }

        label {
            background-color: #ccc;
            display: block;
            float: left;
            width: 100px;
            text-align: left;
            margin-right: 2px;
            padding: 2px 0;
        }

        input {
            display: block;
            float: left;
            width: 150px;
            margin: 2px;
        }

        input.button {
            width: 60px;
            margin-right: 5px;
        }

        fieldset {
            border: none;
            padding: 0;
            margin: 0;
        }

        legend {
            font-weight: bold;
            margin-bottom: 12px;
        }
    </style>
           
    <script type="text/javascript">
        function validForm() {
            var userName = document.getElementById("userName");
            var pwd = document.getElementById("pwd");
            var repwd = document.getElementById("repwd");
            var email = document.getElementById("email");
            if (!validate_required(userName)) {
                alert("请输入登入使用的用户名！");
                return false;
            }
            if (!valid_character(userName.value.cahrAt(0))) {
                alert("登录用户名的首字母不能是数字！");
                return false;
            }
            if (!valid_length(userName.value, 6, 20)) {
                alert("登录用户的长度应当在6-20个字符之间");
                return false;
            }
            if (!validate_email(email.value)) {
                alert("请输入合法的邮箱地址");
                return false;
            }
            return true;
        }
    </script>
</head>

<body onload="center('loginArea')">
            <form id="loginFrom" name="loginForm" onsubmit="validForm();">
                    <div id="loginArea">
                            <fieldset>
                                    <legend>用户注册</legend>
                                    <p>
                                            <label>登录用户</label>
                                            <input id="userName" name="userName" type="text" tabindex="1">
                                        </p>
                                    <p>
                                            <label>登录密码</label>
                                            <input id="pwd" name="pwd" type="password" tabindex="2">
                                        </p>
                                    <p>
                                            <label>重复输入密码</label>
                                            <input id="repwd" name="repwd" type="password" tabindex="3">
                                        </p>
                                    <p>
                                            <label>有效邮箱地址</label>
                                            <input id="email" name="email" type="text" tabindex="4">
                                        </p>
                                    <p>
                                            <input type="submit" id="btlogin" class="button" value="提交" tabindex="3">
                                            <input type="button" id="button" class="button" value="取消" tabindex="4">
                                        </p>
                                </fieldset>
                        </div>
                </form>
        </body>  

</html>